<template>
  <div>
    <div class="news-d-top">
      <div class="news-d-title">
        <h1>{{info.title}}</h1>
        <div class="news-d-author">
          <span>作者：{{info.author}}</span>
          <span>时间：{{info.create_time}}</span>
        </div>
      </div>
    </div>
    <div class="news-d-content" v-html="info.content"></div>
    <div class="news-d-wechat">
      <span>分享到：</span>
      <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/news/wechat.png" @click="shares()" />
    </div>
    <div class="news-more">
      <div class="new-more-position" :style="per ? '' : 'opacity:0'">
        <router-link class="morer-link" v-if="per" :to="'/index/news/detail/'+per.id">上一篇：{{per.title}}</router-link>
      </div>
      <div class="new-more-all">
        <router-link to="/index/news/index" class="all-link"> <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/newmore.png" alt=""> 查看全部
          <!-- <img src="../../assets/bu/btn.png" alt=""> -->
        </router-link>
      </div>
      <div class="new-more-position" :style="next ? '' : 'opacity:0'">
        <router-link class="morer-link" v-if="next" :to="'/index/news/detail/'+next.id">下一篇：{{next.title}}</router-link>
      </div>
    </div>
    <div class="qrcode-model" v-if="qrcode_show" @click="closeQr()">
      <div class="qrcode-box">
        <div class="arcode-title">分享二维码</div>
        <div id="qrcode"></div>
        <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/logo-sm.jpg" id="img-buffer" />
        <div class="qrcode-close">请使用微信扫码分享</div>
        <div class="qrocde-close-txt  ">关闭</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      info: {},
      per: {},
      next: {},
      qrcode_show: false
    }
  },
  mounted() {
    this.id = this.$route.params.id
    this.getData()
  },
  methods: {
    getData() {
      this.ajaxs('index/getNewsDetail', {
        data: { id: this.id },
        success: res => {
          this.info = res.msg.info
          this.per = res.msg.per
          this.next = res.msg.next
        }
      })
    },
    shares() {
      this.qrcode_show = true
      setTimeout(() => {
        var url = 'http://www.jyecloud.cn' + this.$route.fullPath
        $('#qrcode').qrcode({
          render: 'canvas', //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
          minVersion: 3, // version range somewhere in 1 .. 40
          maxVersion: 40,
          ecLevel: 'Q', //识别度  'L', 'M', 'Q' or 'H'
          left: 0,
          top: 0,
          size: 200, //尺寸
          fill: '#000', //二维码颜色
          background: null, //背景色
          text: url, //二维码内容
          radius: 0, // 0.0 .. 0.5
          quiet: 2, //边距 // 4: image box
          mode: 4,
          mSize: 0.2, //图片大小
          mPosX: 0.5,
          mPosY: 0.5,

          label: 'jQuery.qrcode',
          fontname: 'sans',
          fontcolor: '#000',
          image: $('#img-buffer')[0]
        })
      })
    },
    closeQr() {
      this.qrcode_show = false
    }
  },
  watch: {
    // 方法1
    $route(to, from) {
      this.id = this.$route.params.id
      this.getData()
    }
  }
}
</script>

<style scoped>
@import url('../../assets/css/news/detail.css');
</style>